Skip to content

Fix calendar mobile responsiveness with adaptive height and grid layout#7946

Draft
Copilot wants to merge 4 commits intomasterfrom
copilot/fix-mobile-calendar-issue
Draft

Fix calendar mobile responsiveness with adaptive height and grid layout#7946
Copilot wants to merge 4 commits intomasterfrom
copilot/fix-mobile-calendar-issue

Conversation

Copy link
Contributor

Copilot AI commented Feb 1, 2026 •
edited
Loading

Calendar was non-functional on mobile devices due to fixed 600px height and desktop-only grid layout causing overflow and UI compression.

Changes

Calendar height strategy

  • Replaced fixed height: 600 with contentHeight: "auto" (FullCalendar v6 responsive mode)
  • Added windowResizeDelay: 200 for orientation changes

Responsive grid layout

Updated Bootstrap grid classes for proper breakpoints:

<!-- Before: desktop-only -->
<div class="col-lg-9">...</div>
<div class="col-lg-3">...</div>

<!-- After: responsive -->
<div class="col-lg-9 col-md-8 col-sm-12">...</div>
<div class="col-lg-3 col-md-4 col-sm-12">...</div>

Layout behavior:

  • Mobile (<768px): Full-width stacking
  • Tablet (768-991px): 66/33 split
  • Desktop (≥992px): 75/25 split

Mobile toolbar optimization

Viewport detection (innerWidth < 768) splits toolbar across header/footer on mobile to prevent button crowding:

headerToolbar: isMobile ? {
    start: "prev,next",
    center: "title", 
    end: "today"
} : /* full desktop toolbar */,
footerToolbar: isMobile ? {
    end: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
} : false

Test coverage

Added mobile.calendar.spec.js validating mobile (375x812), tablet (768x1024), orientation changes, and event creation.

Files Modified

  • src/skin/js/Calendar.js - Responsive configuration
  • src/v2/templates/calendar/calendar.php - Grid breakpoints
  • cypress/e2e/ui/events/mobile.calendar.spec.js - Mobile test suite (new)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • download.cypress.io
    • Triggering command: /usr/local/bin/node node dist/index.js --exec install (dns block)
  • https://api.github.com/repos/Bacon/BaconQrCode/zipball/36a1cb2b81493fa5b82e50bf8068bf84d1542563
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)
  • https://api.github.com/repos/DASPRiD/Enum/zipball/b5874fa9ed0043116c72162ec7f4fb50e02e7cce
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)
  • https://api.github.com/repos/azuyalabs/yasumi/zipball/cc07874da062070fdc201a4297a7724f7d6aafb2
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)
  • https://api.github.com/repos/composer/package-versions-deprecated/zipball/b4f54f74ef3453349c24a845d22392cd31e65f1d
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)
  • https://api.github.com/repos/defuse/php-encryption/zipball/f53396c2d34225064647a05ca76c1da9d99e5828
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)
  • https://api.github.com/repos/drewm/mailchimp-api/zipball/c6cdfab4ca6ddbc3b260913470bd0a4a5cb84c7a
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)
  • https://api.github.com/repos/paragonie/random_compat/zipball/996434e5492cb4c3edcb9168db6fbb1359ef965a
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)
  • https://api.github.com/repos/php-http/discovery/zipball/82fe4c73ef3363caed49ff8dd1539ba06044910d
    • Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/3zRS7o /usr/bin/composer install --no-dev (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title>Bug: Calendar doesn't work on mobile.</issue_title>
<issue_description>Good morning! I installed ChurchCRM a few days ago, but I can't use the calendar on my phone. I tried creating a button to use the calendar via API to work around the problem, but it still didn't work. Is there any plan to enable scheduling via mobile?</issue_description>

Comments on the Issue (you are @copilot in this section)

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot AI and others added 3 commits February 1, 2026 02:41
@DawoudIO
Fix mobile calendar display with responsive height and grid layout
2d9e47f 
Co-authored-by: DawoudIO <554959+DawoudIO@users.noreply.github.com>
@DawoudIO
Add mobile-optimized calendar toolbar layout
95388bb 
Co-authored-by: DawoudIO <554959+DawoudIO@users.noreply.github.com>
@DawoudIO
Add mobile calendar UI tests for viewport responsiveness
c59ad08 
Co-authored-by: DawoudIO <554959+DawoudIO@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix calendar functionality on mobile devices Fix calendar mobile responsiveness with adaptive height and grid layout Feb 1, 2026
Copilot AI requested a review from DawoudIO February 1, 2026 02:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@DawoudIO DawoudIO Awaiting requested review from DawoudIO

Assignees

@DawoudIO DawoudIO

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug: Calendar doesn't work on mobile.

2 participants

@DawoudIO